<template>
  <div>
    <!-- 搜索 、历史记录、热门搜索部分 -->
    <div v-show="!showProductList">
       <!-- 头部输入框 -->
      <div class="searchContainer">
        <!-- <div class="inputDiv">
          <van-icon name="search" style="padding:0 10px" />
          请输入商品名称
        </div> -->
        <van-field
          v-model="value"
          placeholder="请输入商品名称"
          class="inputDiv"
          @input="changeInput"
          @blur="handleBlur"
          @clear="handleClear"
          @keyup.enter.native.stop="pressEnter"
          clearable
          center
          left-icon="search"
        />
        <div class="cancel" @click="goBack">取消</div>
      </div>

      <!-- 默认位置 显示历史和热门搜索 -->
      <div v-show="!value">
        <!-- 历史纪录 -->
        <div class="historyContainer">
          <!-- 上半部分 -->
          <div class="top">
            <span>历史纪录</span>
            <van-icon
              name="delete-o"
              style="font-size: 20px"
              @click="handleCancel"
            />
          </div>
          <!-- 内容部分 -->
          <div class="content">
            <van-tag
              plain
              type="primary"
              class="vantag"
              v-for="(item, index) in historyList"
              :key="index"
              @click="toProduct(item)"
              >{{ item }}</van-tag
            >
          </div>
        </div>
        <!-- 横线 -->
        <div class="line"></div>

        <!-- 热门搜索 -->
        <div class="hotSearchContainer">
          <div class="hotSearch">热门搜索</div>
          <!-- 内容部分 -->
          <div class="content">
            <van-tag
              plain
              type="primary"
              class="vantag"
              :class="item.highlight == 1 ? 'active' : ''"
              v-for="(item, index) in hotWordList"
              :key="index"
              @click="toProduct(item.keyword)"
              >{{ item.keyword }}</van-tag
            >
          </div>
        </div>
      </div>

      <!-- 搜索的列表组件 -->
      <SearchList v-show="value" v-for="(item,index) in searchTimeList" :key="index" :content='item' />
    
    </div>
   

    <!-- 产品列表组件 -->
    <ProductList v-show="showProductList"   />
  </div>
</template>

<script>
import SearchList from "./searchList.vue";
import ProductList from './ProductList.vue'
import { Notify } from "vant";
import debounce from 'lodash/debounce'
import throttle from 'lodash/throttle'
// import _ from "lodash";
export default {
  name: "Search",
  data() {
    return {
      value: "", //用户输入搜索内容
      hotWordList: [], //热门关键词数组列表
      historyList: [], //历史搜索纪录数组
      searchTimeList:[],//实时搜索列表的数组
      noshow:false,    //二级路由组件默认不显示
      showProductList:false,   //商品列表是否显示  上来默认不显示
      directlyList:[],   //产品列表的数据
    };
  },
  components: {
    SearchList,
    ProductList
  },
  methods: {
    //清除输入内容的文件
    handleClear() {
      // console.log(111)
    },
    // 返回上一级路由
    goBack() {
      this.$router.back();
    },
    // 获取热词数据
    async getHotWordList() {
      const result = await this.$ajax.search.reqGetHotWordList();
      if (result.code == 200) {
        this.hotWordList = result.data.hotKeywordVOList;
      } else {
        // Notify({ type: "warning", message: "网络失败，请稍后再试" });
      }
    },
    // 输入框失去焦点的时候触发 保存历史记录 
    handleBlur(e) {
      const item = e.target._value.trim();
      // 如果输入的内容为空
      if (!item) {
        return;
      }
      if (this.historyList.length && this.historyList.indexOf(item) != -1) {
        //说明前搜过  把原来的删除，在开头添加一个
        this.historyList.splice(this.historyList.indexOf(item), 1);
        // 添加到最前面
        this.historyList.unshift(item);
        // 存到本地存储
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      } else {
        //之前没搜过 添加到最前面  并在本地存一份
        this.historyList.unshift(item);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }
    },
    // 从本地存储里面获取到搜索历史的数据
    getHistoryList() {
      // 如果之前没存过的话  会是一个null  所以 要|| []
      this.historyList = JSON.parse(localStorage.getItem("historyList")) || [];
    },
    // 点击删除清除历史纪录
    handleCancel() {
      this.historyList = [];
      localStorage.removeItem("historyList");
    },
    //  输入框内容发生变化时触发   做了节流
    changeInput: throttle(function () {
      // 请求搜索列表的数据
      this.getSearchTimeList()
    }, 1000),
    // 实时搜索列表的数据
    async getSearchTimeList(){
      const data = `keywordPrefix=${this.value}`
      const result = await this.$ajax.search.reqGetTimeList(data)
      if(result.code == 200){
        this.searchTimeList = result.data
      }else{
        Notify({ type: 'warning', message: '网络不通畅，请稍后再试~' });
      }

    },
    // 按下回车发请求获取当前商品列表的数据，有数据之后展示商品列表
    async pressEnter(){
        let {value} = this
        const data =  {value}
      // 让服务员发请求获取数据   请求成功之后 在再跳转路由
         await  this.$store.dispatch('search/getProductList',data)
         this.$router.push('/productList')
      
    },
    // 点击跳转到商品列表页面 
   async toProduct(value){
      let item = value
     // 如果输入的内容为空
      if (!item) {
        return;
      }
      if (this.historyList.length && this.historyList.indexOf(item) != -1) {
        //说明前搜过  把原来的删除，在开头添加一个
        this.historyList.splice(this.historyList.indexOf(item), 1);
        // 添加到最前面
        this.historyList.unshift(item);
        // 存到本地存储
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      } else {
        //之前没搜过 添加到最前面  并在本地存一份
        this.historyList.unshift(item);
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
      }

      // console.log(value)


        let value1 = value
        const data =  {value:value1}
     await this.$store.dispatch('search/getProductList',data)

     this.$router.push('/productList')
    }
  
  },
  mounted() {
    // 获取搜索热词的数据
    this.getHotWordList();
    // 从本地存储里面获取到搜索历史的数据
    this.getHistoryList();
  },
};
</script>

<style lang="less" scoped>
.searchContainer {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  height: 45px;
  line-height: 25px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  .inputDiv {
    border-radius: 5px;
    background-color: #eee;
    flex: 1;
    color: #ccc;
  }
  .cancel {
    margin-left: 20px;
  }
}

// 历史纪录部分
.historyContainer {
  padding: 0 20px;
  font-size: 14px;
  margin-top: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    span {
      color: #ccc;
    }
  }
  .content {
    margin-top: 15px;
    .vantag {
      padding: 4px 8px;
      color: #666;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

// 热门搜索
.hotSearchContainer {
  padding: 0 20px;
  font-size: 14px;
  margin-top: 20px;
  .hotSearch {
    font-size: 14px;
    color: #bbb;
  }
  .content {
    margin-top: 15px;
    .vantag {
      padding: 4px 8px;
      color: #666;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

// 横线部分
.line {
  width: 100%;
  height: 10px;
  background-color: #eee;
  margin-top: 20px;
}

.active {
  border: 1px solid #f89 !important;
  color: #f89 !important;
}
</style>